<template>
    <div class="continer">
        <div class="topbox">
            <el-button type="primary" icon="el-icon-plus" @click="add">添加新版本</el-button>
        </div>
        <el-table :data="listData" row-key="number" style="width: 100%" stripe border>
            <el-table-column label="版本号" prop="version"></el-table-column>
            <el-table-column label="URL" prop="url">
                <template slot-scope="scope">
                    <a :href="scope.row.url">{{scope.row.url}}</a>
                </template>
            </el-table-column>
            <el-table-column label="备注" prop="note"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                        type="text"
                        size="mini"
                        @click="handleDelete(scope.$index, scope.row)"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            layout="prev, pager, next, jumper"
            :total="listLen"
            :page-size="limit"
            @current-change="toPage"
            :current-page.sync="currentPage"
            class="txt_r mt_20"
        ></el-pagination>
        <!--        添加文件        -->
        <el-dialog
            title="添加新版本"
            :rules="formRules"
            :visible.sync="showAdd"
            :beforeClose="(close)=>{clearForm('addForm',close)}"
            :closeOnClickModal="false"
        >
            <el-form :model="myData" label-width="120px" :rules="formRules" ref="addForm">
                <el-form-item label="版本号" prop="version">
                    <el-input v-model="myData.version"></el-input>
                </el-form-item>
                <el-form-item label="安装包" prop="apkName">
                    <el-upload
                        v-if="showFileInput"
                        class="upload-demo"
                        drag
                        action="/admin/system/version/save"
                        :before-upload="beforeupload"
                        multiple
                    >
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">
                            将文件拖到此处，或
                            <em>点击上传</em>
                        </div>
                        <div class="el-upload__tip" slot="tip">只能上传apk文件</div>
                    </el-upload>
                    <div v-else>{{apkName}}</div>
                </el-form-item>
                <el-form-item label="备注" prop="note">
                    <el-input type="textarea" v-model="myData.note" rows="4"></el-input>
                </el-form-item>
                <el-form-item class="txt_r">
                    <el-button type="primary" :loading="formLoading" @click="submit">添加</el-button>
                    <el-button @click="()=>{clearForm('addForm','showAdd')}">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import * as apis from "../../api/system/appVersion";

export default {
    name: "file",
    data() {
        return {
            // 列表数据
            listData: [],
            // 案件类型
            types: [],
            // 总条数
            listLen: 0,
            // 每页条数
            limit: 10,
            currentPage: 1,
            // 显示添加表单
            showAdd: false,
            // 添加
            myData: {},
            formData: null,
            showFileInput: true,
            apkName: "",
            formLoading: false,
            // 表单验证
            formRules: {
                version: [
                    { required: true, message: "请输入版本号", trigger: "blur" }
                ],
                note: [
                    { required: true, message: "请输入备注", trigger: "blur" }
                ]
            }
        };
    },
    methods: {
        // 获取列表
        getList(page = 1) {
            this.currentPage = page;
            apis.getList({
                page: page,
                limit: this.limit
            })
                .then(data => {
                    if (data.code) {
                        this.$message({
                            type: "error",
                            message: data.message,
                            duration: 1800
                        });
                        return;
                    }
                    this.listLen = data.data.total;
                    this.listData = data.data.list;
                })
                .catch(() => {
                    this.$message({
                        type: "error",
                        message: "获取列表失败",
                        duration: 1800
                    });
                });
        },
        // 添加文件
        beforeupload(file) {
            if (!/\.apk$/.test(file.name)) {
                this.$message({
                    type: "error",
                    message: "上传文件类型错误",
                    duration: 1800
                });
                return false;
            }
            this.apkName = file.name;
            this.showFileInput = false;
            this.formData.append("apkFile", file, file.name);
            return false;
        },
        // 点击添加
        add() {
            this.myData = {};
            this.formData = new FormData();
            this.showAdd = true;
            this.showFileInput = true;
        },
        // 提交添加
        submit() {
            this.$refs["addForm"].validate(valid => {
                if (!valid) {
                    return;
                }
                this.formData.append("version", this.myData.version);
                this.formData.append("note", this.myData.note);
                this.formLoading = true;
                apis.add(this.formData)
                    .then(data => {
                        this.formLoading = false;
                        if (data.code) {
                            this.$message({
                                type: "error",
                                message: data.message
                            });
                            return;
                        }
                        this.$message({
                            type: "success",
                            message: "添加成功!"
                        });
                        this.clearForm("addForm", "showAdd");
                        this.getList();
                    })
                    .catch(() => {
                        this.formLoading = false;
                        this.$message({ type: "error", message: "请求错误!" });
                    });
            });
        },
        // 删除
        handleDelete(id, obj) {
            this.$confirm("确定删除该版本吗", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    this.$prompt("要删除请输入密码", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        inputPattern: /^天王盖地虎$/,
                        inputErrorMessage: "密码错误"
                    })
                        .then(() => {
                            apis.del({
                                id: obj.id
                            })
                                .then(data => {
                                    if (data.code) {
                                        this.$message({
                                            type: "error",
                                            message: data.message
                                        });
                                        return;
                                    }
                                    this.$message({
                                        type: "success",
                                        message: "删除成功!"
                                    });
                                    this.getList();
                                })
                                .catch(() => {
                                    this.$message({
                                        type: "error",
                                        message: "删除失败!"
                                    });
                                });
                        })
                        .catch(() => {});
                })
                .catch(() => {});
        },
        // 跳转页数
        toPage(val) {
            this.getList(val);
        },
        // 清空表单  name: 表单rel名称，close：关闭方法/显示属性
        clearForm(name, close) {
            if (this.$refs[name]) {
                this.$refs[name].resetFields();
            }
            if (typeof close == "function") {
                close();
            } else {
                this[close] = false;
            }
        }
    },
    created() {
        this.getList();
    }
};
</script>

<style scoped>
.txt_r {
    text-align: right;
}
.mt_20 {
    margin-top: 20px;
}
.el-tag + .el-tag {
    margin-left: 10px;
}
.topbox {
    margin-bottom: 20px;
}
</style>
